<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <title>Document</title>
    <style>
        /* #box{
            width: 200px;
           /*  overflow: hidden; 
            
        }
        ul{  
            width: 600px;
            height: 200px;
            list-style: none;
        }
        li{
            width: 200px;
            height: 200px;
            float: left;
        }
        */
        img{
            width: 200px;
            height: 200px;
           
        }
    </style>
</head>
<body>
     <div id="box">
        <img :src="arr1" alt="">
         <br>
         <button @click='sh'>上一张</button>
         <button @click='xia'>下一张</button>
     </div>
     <script>
         new Vue({
             el:'#box',
             data(){
                 return{
                     arr:['./OIP-C (3).jpg','./OIP-C (4).jpg','./1631847987124.jpeg'],
                    index:0
                 }
             },
           methods:{
               sh(){
                this.index--;
                if(this.index<0){
                       this.index=this.arr.length
                   }
               },
               xia(){
                   this.index++;
                   if(this.index>=this.arr.length){
                       this.index=0;
                   }
               }
           },
           computed:{
               arr1(){
                   return this.arr[this.index]
               }
           }
         })
     </script>
</body>
</html>